import styled from'styled-components'
// &&:
  // 是一个类选择器
  // 可以使用它选中样式组件的单个实例
  // 如果一个样式组件中使用了&&选择器，那么它的所有实例都会被添加一个实例独有的类名，&&就是这个类名的对应的选择器
  // && 被转换成 .one.one 这种选择器，它的选择器权重是两个类选择器的权重
// `${样式组件名}` ==== 会被解析成这个样式组件的唯一类名的选择器 .one，本质就是个类选择器
export const Input = styled.input.attrs({
    type:'checkbox'
})``

export const Label = styled.label`
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
`
const LabelStyle = {
  "dark":`
  background-color: black;
  color: white;
  ${Input}:checked + && {
    color: blue;
  }
`,
"default":`
background-color: white;
color: black;
${Input}:checked + && {
  color: red;
} 
`
}
export const LabelText = styled.span`
  ${(props) =>LabelStyle[props.$mode||"default"]}
`;
 